<script setup>
import { ref, onMounted } from 'vue'
import { supabase } from './lib/supabaseClient'
const countries = ref()
const imageUrl = ref()
// const uid=''

async function getCountries() {
  await supabase.auth.signOut()
  await supabase.auth.signInWithPassword({
    email: 'test@163.com',
    password: '123456',
  })
  // await supabase.auth.signInWithPassword({
  //   email: 'yy@qq.com',
  //   password: '123',
  // })

  // 获取当前用户的 UID,1//
  // supabase.auth.getUser()?.id;
  const { data: { user },user_error }=await supabase.auth.getUser();
  // const user1 =supabase.auth.getUser();
  console.log(user,user_error);
  // console.log(user.id);

  // const id = '3'
  // await supabase
  //     .from('posts')
  //     .delete()
  //     .match({ id: '4' })

  const { data, error } = await supabase
      .from('posts')
      .select('id')
  console.log(data, error)


//  await supabase
//       .from('posts')
//       .insert([
//         {
//           title: "Hello World",
//           content: "My first post",
//           // user_id: "15866be5-4774-473d-89c7-688ed08f616d",
//           user_id:"2b4315f6-7c35-4438-9745-cbfc8dd07ef4",
//           user_email: "myemail@gmail.com"
//         }
//       ])
}
function handleFileChange(event){
  // 获取用户选择的文件
  event.target.files[0]
}
async function uploadFile() {
  // insert into storage.buckets
  // (id, name)
  // values
  // ('avatars', 'avatars');

//   create policy "Allow authenticated uploads"
//   on storage.objects
//   for insert
//     to authenticated
//   with check (
//       bucket_id = 'my_bucket_id' and
//   (storage.foldername(name))[1] = auth.uid()::text
// );

  // create policy "Individual user Access"
  // on storage.objects for select
  //   to authenticated
  // using ( auth.uid() = owner_id );
  // AND storage."extension"(name) = 'jpg'
  // bucket_id = {bucket_name}
  // and auth.uid()::text = (storage.foldername(name))[1]
  // team_id in (select auth.jwt() -> 'app_metadata' -> 'teams')
  // 获取文件对象（假设是通过 input 元素获取的）
  const fileInput = document.getElementById('fileInput');
  const file = fileInput.files[0];
  // 上传文件
  const { data, error } = await supabase.storage
      .from('avatars')
      .upload('public/avatar1.png', file)
  if (error) {
    console.error('文件上传失败:', error);
  } else {
    console.log('文件上传成功:', data);
  }
}
async function  getFile(){
  // https://your-project-id.supabase.co/storage/v1/object/avatars/public/avatar1.png
      // 使用 Supabase 客户端 SDK 获取文件信息
  // const { data, error } = await supabase.storage
  //     .from('avatars') // 替换为你的存储桶名称
  //     .getMetadata('public/avatar1.png');
  const { data, error } = await supabase.storage.from('avatars').download('public/avatar1.png')
  if (error) {
    console.error('获取文件信息失败:', error);
  } else {
    console.log('文件信息:', data);
    imageUrl.value = URL.createObjectURL(data);
  }
}
onMounted(() => {
  getCountries()
})

</script>

<template>

  <div id="app">
    <input type="file" @change="handleFileChange" id="fileInput">
    <button @click="uploadFile">上传图片</button>

    <div v-if="imageUrl">
      <h2>上传的图片预览</h2>
      <img :src="imageUrl" alt="Uploaded Image">
    </div>

    <button @click="getFile">获得图片</button>
  </div>

<!--  <div id="app">-->
<!--    <button v-on:click="handleClick">点击我</button>-->
<!--  </div>-->
  <ul>
    <li v-for="country in countries" :key="country.id">{{ country.name }}</li>
  </ul>
</template>